
<script setup>
import { geUpdateInfoAPi } from "../../http/http";
import MyDatails from "../../components/MyDatails.vue";
import { useRoute, useRouter } from "vue-router";
import { reactive, toRefs } from "vue";
const { push } = useRouter();
const route = useRoute();
// const id = route.query.id;
const name = route.query.name;
const token = JSON.parse(localStorage.getItem("token"));
const { id } = token;
console.log(id);

// 数据
const data = reactive({
  user_nickname: name,
  status: null,
  mysex: 0,
});
// 修改性别
const type = route.query.type;
if (type == "sex") {
  data.status = false;
}
// 点击修改名称

const upname = async () => {
  // 点击完成修改性别

  let obj = {
    id: id,
    sex: data.mysex,
  };
  console.log(obj);
  let res = await geUpdateInfoAPi(obj);
  console.log(res);
  if (res.code == 200) {
    push("/Personalnfo");
  }
  return;

  // if ((data.status = true)) {
  //   let obj = {
  //     user_nickname: data.user_nickname,
  //     id: id,
  //   };
  //   let res = await geUpdateInfoAPi(obj);
  //   if (res.code == 200) {
  //     push("/Personalnfo");
  //   }
  // }
};

// 点击选择
const over = (e) => {
  console.log(e);
  data.mysex = e;
};

const { user_nickname, status, mysex } = toRefs(data);
</script>
<template>
  <MyDatails>
    <template #left>
      <van-icon name="arrow-left" @click="$router.back" />
    </template>
    <template #text>
      <h3>修改个人信息</h3>
    </template>
    <template #right_a>
      <span class="right_a" @click="upname">保存</span>
    </template>
  </MyDatails>
  <div class="upname" v-show="status == true">
    <van-field
      v-model="user_nickname"
      label="名称"
      placeholder="请输入用户名"
    />
  </div>
  <!-- 性别 -->
  <div class="sex">
    <li @click="over(0)">
      <div class="name">男</div>
      <span v-show="mysex == 0">√</span>
    </li>
    <li @click="over(1)">
      <div class="name">女</div>
      <span v-show="mysex == 1">√</span>
    </li>
  </div>
</template>


<style lang="scss" scoped>
.right_a {
  font-size: 30px;
}
.sex {
  padding: 0 20px;
  margin-top: 20px;
  li {
    display: flex;
    line-height: 50px;
    justify-content: space-between;
    font-size: 30px;
    margin-top: 15px;
    span {
      color: red;
    }
  }
}
</style>